<template>
	<view class="my-content">
		<u-tabs-swiper ref="uTabs" :list="list" active-color="#ff4a17" :current="current" @change="tabsChange"
			:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		<swiper class="swiper height" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item v-for="(tItem, index) in list" :key="index">
				<scroll-view scroll-y :scroll-top="scrollTop" class="height" @scrolltolower="onreachBottom"
					@scroll="scroll">
					<view v-for="item in favoriteList" :key="item.id" class="u-margin-top-20">
						<u-card class="taskListCard" :show-head="false" margin="0">
							<view slot="body" class="u-flex">
								<view v-if="check">
									<u-checkbox active-color="#ff7348" shape="circle"
										v-model="item.checked"></u-checkbox>
								</view>
								<view class="u-flex-1">
									<view class="u-margin-bottom-20">{{item.title}}</view>
									<u-row gutter="20" >
										<u-col span="4">
											<u-card :body-style="{background:'#f6f6f6'}" class="charts" margin="0" :show-head="false">
												<view slot="body">
													<view class="chartsTitle u-font-24">{{$t("收录企业")}}</view>
													<view class="number">
														100
													</view>
												</view>
											</u-card>
										</u-col>
										<u-col span="4">
											<u-card :body-style="{background:'#f6f6f6'}" class="charts" margin="0" :show-head="false">
												<view slot="body">
													<view class="chartsTitle u-font-24">{{$t("电话数量")}}</view>
													<view class="number">
														100
													</view>
												</view>
											</u-card>
										</u-col>
										<u-col span="4">
											<u-card :body-style="{background:'#f6f6f6'}" class="charts" margin="0" :show-head="false">
												<view slot="body">
													<view class="chartsTitle u-font-24">{{$t("电话数量")}}</view>
													<view class="number">
														100
													</view>
												</view>
											</u-card>
										</u-col>
									</u-row>
									<view class="u-flex u-row-between u-margin-top-30 u-col-bottom" v-if="!check">
										<view class="actions">
											<view>创建时间：{{item.createTime}}</view>
											<view>
												<u-icon name="more-dot-fill" size="45"
													@click="showActionFun(item)"></u-icon>
											</view>
										</view>
										<view>
											<u-button type="primary" :custom-style="customStyle1" hover-class="none"
												@click="info(item)" class="u-margin-right-20">
												{{$t("查看详情")}}
											</u-button>
										</view>
									</view>
								</view>
							</view>
						</u-card>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="footer u-flex u-row-center">
			<u-button type="primary" v-if="check" :custom-style="customStyle" hover-class="none" @click="checkSure"
				class="u-margin-right-20">
				{{$t("确认选择")}}
			</u-button>
			<u-button type="primary" v-else :custom-style="customStyle" hover-class="none" @click="addFun"
				class="u-margin-right-20">
				{{$t("新建名单")}}
			</u-button>

		</view>
		<u-action-sheet :list="actionList" @click="actionClick" v-model="showAction"></u-action-sheet>
		<u-modal v-model="addModal" @confirm="addSubmit" :show-cancel-button="true" :title="$t('新建名单')">
			<view class="slot-content u-margin-right-40 u-margin-left-40">
				<u-input height="60" v-model="name" :placeholder="$t('请输入')" :custom-style="myStyle1" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		/* （此页面可通过获客和电销的选择收藏夹或选择拜访名单进来，通过option参数区分) */
		onLoad({
			type,
			check,
		}) {
			this.type = type
			this.check = Boolean(check); //是否用来选择
			if (type === 'bf') {
				this.list.splice(1, 1)
			} else if (type === 'sc') {
				this.list.splice(0, 1)
			}
			this.getListData()
		},
		data() {
			return {
				check: false,
				myStyle1: {
					borderBottom: '1rpx solid #ccc',
					fontSize: '24rpx'
				},
				//新建名单名称
				name: '',
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '35rpx',
					'width': '240rpx',
					height: '70rpx',
					margin: '0'
				},
				currentId: null,
				showAction: false,
				actionList: [{
					text: this.$t("编辑")
				}, {
					text: this.$t("删除")
				}],
				customStyle1: {
					background: 'transparent',
					'border-radius': '35rpx',
					border: '1rpx solid #ff4a17',
					color: '#ff4a17',
					'min-width': '190rpx',
					'font-size': '26rpx',
					height: '70rpx',
				},
				type: 'bf', //bf 拜访用   sc 收藏用
				list: [{
					name: this.$t('拜访名单'),
					id: '1'
				}, {
					name: this.$t('收藏夹'),
					id: '2'
				}, {
					name: this.$t('本地导入'),
					id: '3'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				favoriteList: [{
					title: "tmd收藏夹名字",
					enterpriseNum: '298',
					telNum: '388',
					createTime: '2024年8月20日 15:56:04',
					id: 'asdfjkahsdfi23kj3'
				}, {
					title: "tmd收藏夹名字",
					enterpriseNum: '298',
					telNum: '388',
					createTime: '2024年8月20日 15:56:04',
					id: '222'
				}, {
					title: "tmd收藏夹名字",
					enterpriseNum: '298',
					telNum: '388',
					createTime: '2024年8月20日 15:56:04',
					id: '333'
				}, {
					title: "tmd收藏夹名字",
					enterpriseNum: '298',
					telNum: '388',
					createTime: '2024年8月20日 15:56:04',
					id: '444'
				}, {
					title: "tmd收藏夹名字",
					enterpriseNum: '298',
					telNum: '388',
					createTime: '2024年8月20日 15:56:04',
					id: '555'
				}],
				addModal: false
			};
		},
		methods: {
			//获取当前选中的list
			getCheckList() {
				return this.favoriteList.filter(item => item.checked)
			},
			//确认选择返回之前的页面 携带所选中的数据 传给上一个页面的 checkOver方法，
			checkSure() {
				console.log(this.getCheckList());
				// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
				let pages = getCurrentPages()

				// 2. 上一页面实例
				// 想要得到上一页面的实例需要 -2
				// 返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length - 2]

				// 3. 给上一页面实例绑定getUser()方法和参数（注意是$vm）
				prevPage.$vm.checkOver(this.getCheckList())

				// 4. 返回上一页面
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			},
			//添加提交方法
			addSubmit() {
				console.log(this.name);
				//走添加接口，重新请求list
				this.getListData()
			},
			addFun() {
				this.addModal = true;
			},
			info(row) {
				//跳转详情
				this.$u.route({
					url: 'pages/teleSales/favoriteInfo/favoriteInfo',
					params: {
						id: row.id
					}
				})
			},
			getListData() {
				if (this.type === 'bf') {
					//请求拜访list

				} else if (this.type === 'sc') {
					//请求收藏list
				}
				//请求导入list
			},
			//选择点击方法
			actionClick(index) {
				console.log(index);
				const _this = this;
				if (index === 0) {
					//编辑
					this.$u.route({
						url: 'pages/teleSales/favoriteEditor/favoriteEditor',
						params: {
							id: _this.currentId
						}
					})
				} else {
					//删除
					uni.showModal({
						title: this.$t("温馨提示"),
						content: this.$t("确认删除么"),
						success(res) {
							if (res.confirm) {
								_this.deleteFun();
							}
						}
					});
				}
			},
			//删除某一条数据
			deleteFun() {
				console.log(this.currentId);
				//重新请求列表数据
				this.getListData();
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log('onreachBottom');
				this.pageNum++;
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			showActionFun(row) {
				console.log(row);
				this.currentId = row.id;
				this.showAction = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;

		.swiper {
			padding: 0 20rpx;
			padding-bottom: 20rpx;

		}

		.height {
			height: calc(100vh - 264rpx);
		}

		.actions {
			color: #999;
			font-size: 22rpx;
		}

		.charts {
			text-align: center;

			.chartsTitle {
				margin-bottom: 20rpx;
			}

			.chartsLabel {
				color: #999;
				margin-top: 10rpx;
			}

			.number {
				color: #666666;
				font-size: 50rpx;
				font-weight: 800;
			}
		}
	}
</style>